<template>
  <div class="Toppadding" v-if="shop">
      <my-head title="商品详情"></my-head>
      <div class="moveDetailedmain">
          <img :src="$route.query.banner" alt="">
          <div class="detailMove_m">
                <div class="detailMove_mTit">
                    <p class="p1">{{$route.query.title}}</p>
                    <p></p>
                </div>
                <div class="detailedMove_time">{{$route.query.projectLabel}}</div>
                <div class="detailedMove_place">
                    {{$route.query.venueName}}
                </div>
                <div class="detailedMove_footer">
                    
                    <span>不可退</span>
                    <span>实名制</span>
                    <span>电子票/兑换票</span>
                </div>
          </div>
           <van-cell-group >
              
                <van-cell title="商品单价" :value="(shop.priceLowOri/100).toFixed(2)+'元'"  />
                
                <van-cell title="购买数量"    >
                    <template #default>
                        <van-stepper  @change="changevalue" v-model.number="value" min="1" />
                    </template>
                </van-cell>

                <van-cell title="购买小计"  :value="((shop.priceLowOri/100)* value).toFixed(2) +'元'  "  />
            </van-cell-group>
      </div>
      <my-car :count='value'></my-car>
  </div>
</template>

<script>
export default {
data() {
    return {
         value:1,
        shop:null,
    }
},
methods: {
       //数目框里面的值不能小于1
     changevalue(value){
            if(value<1){
                this.value = 1;
            }
        },
},
mounted() {
    this.shop=this.$route.query
},
}
</script>

<style>
.moveDetailedmain{
    width: 100%;
}
.moveDetailedmain img{
    width: 100%;
    box-shadow: 0px 2px 5px #c5c4c4;
}
.detailMove_m{
    padding: 12px;
    border-radius: 10px;
    width: 100%;
    background: #fff;
}
.detailMove_mTit{
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    height: 36px;
    line-height: 36px;
     overflow: hidden;
}
.detailMove_mTit .p1{
    width: 300px;
    overflow: hidden;
}
.detailedMove_time{
    font-size: 14px;
     font-weight: 700;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
}
.detailedMove_place{
    font-size: 18px;
    font-weight: 700;
    height: 38px;
    line-height: 38px;
}
.detailedMove_footer{
    height: 32px;
    font-size: 12px;
    line-height: 32px;
    color: #666;


}
.detailedMove_footer span{
    display: inline-block;
    margin-right: 15px;

}
.moveDetailed_person{
    margin-top: 12px;
     border-radius: 10px;
    width: 100%;
    background: #fff;
    padding-bottom: 20px;   
    min-height: 50px;
    margin-bottom: 10px;
}
.moveDetailed_person_cont{
  overflow-x: scroll;
    position: relative;
    overflow-y:hidden ;
    width: 100%;
    height: 85px;
}
.detailedMove_footer_tit{
    padding: 20px 10px ;
    font-weight: 700;
    font-size: 14px;
}

.moveDetailed_person ul{
    display: flex;
    height: 80px;
   flex-direction: row;
   width: auto;
   position: absolute;
   left: 0;
}
.moveDetailed_person li{
    width: 60px;
    height: 80px;
    margin-left: 12px;
}
.moveDetailed_person li img{
    width: 60px;
    height: 60px;
}
.moveDetailed_person li p{
    margin-top: 4px;
    text-align: center;
    font-size:12px ;
}
</style>